import React from "react";
import { ListItemAvatar, Avatar, ListItemText, Stack } from "@mui/material";

interface MemberType {
  id: string;
  name: string;
  avatar?: string;
}

const Member: React.FC<{ data: MemberType }> = ({ data }) => {
  return (
    <Stack direction="row" sx={{ alignItems: "center" }}>
      <ListItemAvatar>
        <Avatar
          alt={data.name}
          src={data.avatar}
          sx={{
            bgcolor: stringToColor(data.name),
            width: 40,
            height: 40,
          }}
        >
          {data.name.charAt(0).toUpperCase()}
        </Avatar>
      </ListItemAvatar>
      <ListItemText primary={data.name} />
    </Stack>
  );
};

// ランダムな色を生成する関数
function stringToColor(string: string) {
  let hash = 0;
  let i;

  for (i = 0; i < string.length; i += 1) {
    hash = string.charCodeAt(i) + ((hash << 5) - hash);
  }

  let color = "#";

  for (i = 0; i < 3; i += 1) {
    const value = (hash >> (i * 8)) & 0xff;
    color += `00${value.toString(16)}`.slice(-2);
  }

  return color;
}

export default Member;
